<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>


<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
      crossorigin="anonymous">

<body>

<div id="app">


    <table class="table" id="table">
        <thead>
        <tr>
            <th scope="col">
                <div scope="col1">
                    <button type="button" class="btn btn-primary" data-target="#myModal1" data-toggle="modal">新增
                    </button>
                </div>
            </th>

        </tr>
        <tr>
            <th scope="col">id</th>
            <th scope="col">姓名</th>
            <th scope="col">开始时间</th>
            <th scope="col">结束时间</th>
            <th scope="col">状态</th>
            <th scope="col">申请时间</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr V-for="item in info" v-bind="item">
            <th scope="row" >{{item.id}}</th>
            <td>{{item.user_name}}</td>
            <td>{{item.start_time}}</td>
            <td>{{item.end_time}}</td>
            <td>{{item.status}}</td>
            <td>{{item.create_time}}</td>


            <td>
                <div class="dropdown">
                    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
                       data-toggle="dropdown" aria-expanded="false">
                        选项
                    </a>

                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <a  @click="fun(item.id)" class="dropdown-item" data-toggle="modal" data-target="#exampleModal1">查看</a>
                        <a class="dropdown-item" data-target="#myModal" data-toggle="modal">修改</a>
                        <a class="dropdown-item" data-toggle="modal" data-target="#exampleModal">删除</a>
                        <a class="dropdown-item" data-toggle="modal" data-target="#exampleModal">导出</a>


                    </div>
                </div>
            </td>
        </tr>


        </tbody>
    </table>

    <!--    查看-->
    <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel1">查看</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    {{xxx}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

                </div>
            </div>
        </div>
    </div>

    <!--    修改-->
    <div class="modal fade" id="myModal" aria-labelledby="myModallabel" aria-hidden="true" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>

                </div>
                <form id="formData" class="form-horizontal">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="control-label col-lg-2">开始</label>
                            <div class="col-lg-9">
                                <input type="date" value="" name="username"
                                       class="form-control"></br>

                                <input type="time" value="" name="username"
                                       class="form-control"></br>

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-lg-2">结束</label>
                            <div class="col-lg-9">
                                <input type="date" value="" name="password" class="form-control">
                                <input type="time" value="" name="username"
                                       class="form-control"></br>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-default" type="button" data-dismiss="modal">关闭</button>
                        <button class="btn btn-success" type="button" onclick="">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--    删除-->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">删除</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    是否删除？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">否</button>
                    <button type="button" class="btn btn-primary">是</button>
                </div>
            </div>
        </div>
    </div>

    <!--    导出-->
    <!--    新增-->
    <div class="modal fade" id="myModal1" aria-labelledby="myModallabel" aria-hidden="true" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>

                </div>
                <form id="formData1" class="form-horizontal">
                    <div class="modal-body">
                        <div class="form-group">

                            <label class="control-label col-lg-2">用户id</label>
                            <div class="col-lg-9">
                                <input type="text" value="" name="username"
                                       class="form-control"></br>

                            </div>


                            <label class="control-label col-lg-2">开始</label>
                            <div class="col-lg-9">
                                <input type="date" value="" name="username"
                                       class="form-control"></br>
                                <input type="time" value="" name="username"
                                       class="form-control"></br>
                            </div>

                            <label class="control-label col-lg-2">结束</label>
                            <div class="col-lg-9">
                                <input type="date" value="" name="password" class="form-control">
                                <input type="time" value="" name="username"
                                       class="form-control"></br>
                            </div>

                        </div>
                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-default" type="button" data-dismiss="modal">关闭</button>
                        <button class="btn btn-success" type="button" onclick="">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
        crossorigin="anonymous"></script>

<script>


    new Vue({
        el: '#app',
        data() {
            return {
                info: null,
                xxx:null
            }
        },
        methods: {
            fun(id) {
                alert(id)

                axios.post('dangdu111',{id:id})
                    .then(response => (this.xxx = response.data))

                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            }


        },
        mounted() {
            axios.post('seleOver')
                .then(response => (this.info = response.data))

                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }
    })



</script>


</body>


</html>


